<script setup>
import { reactive,toRefs,ref,onBeforeMount, onMounted } from 'vue';
import { addUserHandler,updateUserHandler } from '../../api/user.js' 
import { ElMessage } from 'element-plus'

const data = reactive({
    userForm:{
        username: "",
        qq: "",
        address: ""
    }
})
const props = defineProps({
    method: {
        type: String,
        default: "Create"
    },
    userForm: {
        type: Object
    }
})
const emits = defineEmits(["rollback"])
const userFormRef = ref()
const {userForm} = toRefs(data)
const loading= ref(false)
const clear=()=>{
    userFormRef.value.resetFields()
}
const rules = reactive({
  username: [
    { required: true, message: '请输入姓名', trigger: 'blur' },
  ],
  qq: [
    { required: true, message: '请输入QQ号', trigger: 'blur' },
  ],
})
const submit=()=>{
    userFormRef.value.validate((valid)=>{
        if(valid){
            loading.value= true
            console.log(loading.value)
            if (props.method == "Create"){
                addUserHandler(data.userForm).then((response)=>{
                    ElMessage({
                        message: response.data.message,
                        type: 'success',
                    })
                    loading.value = false
                    console.log(loading.value)
                    // emits('rollback')
                })
            } else{
                updateUserHandler(data.userForm).then((response)=>{
                    ElMessage({
                        message: response.data.message,
                        type: 'success',
                    })
                    loading.value = false
                    console.log(loading.value)
                    emits('rollback')
                })
            }
        }else{
            ElMessage({
                    message: "请安要求输入",
                    type: 'warning',
                })
        }
    })
}
onMounted(()=>{
    // data.userForm=props.userForm
    // const jsonString = JSON.stringify(props.userForm)
    // data.userForm = JSON.parse(jsonString)
    data.userForm = JSON.parse(JSON.stringify(props.userForm))
})
</script>

<template>
    <el-form :rules="rules" ref="userFormRef" :model="userForm">
      <el-form-item class="form-item" prop="username" label="姓名" label-width="64px">
        <el-input v-model="userForm.username" autocomplete="off" />
      </el-form-item>
      <el-form-item class="form-item" prop="qq" label="QQ" label-width="64px">
        <el-input v-model="userForm.qq" autocomplete="off" />
      </el-form-item>
      <el-form-item class="form-item" prop="address" label="地址" label-width="64px">
        <el-input v-model="userForm.address" autocomplete="off" />
      </el-form-item>
      <div style="display: block; margin-top:30px;">
        <el-button @click="clear()">清空</el-button>
        <el-button @click="submit()" type="primary">
        {{ props.method=="Create"?"添加":"更新" }}
        </el-button>
      </div>
    </el-form>
</template>

<style scoped>
.form-item{
    width: 300px;
    margin: 20px auto;
}
</style>